<template>
    <div class="login_container">
        <div class="login_box">
            <div class="login_avatar">
                <img src="@/assets/bg/anmerica.jpg"/>
            </div>
            <div class="login_form">
                <el-form ref="loginFormRel" :model="loginUser" :rules="rules">
                    <el-form-item prop="accountName">
                        <el-input
                        placeholder="手机号/账号"
                        prefix-icon="el-icon-user"
                        v-model="loginUser.accountName"></el-input>
                    </el-form-item>
                    <el-form-item prop="accountWord">
                        <el-input
                        placeholder="密码"
                        prefix-icon="el-icon-lock"
                        type="password"
                        v-model="loginUser.accountWord"></el-input>
                    </el-form-item>
                    <el-form-item label="记住密码">
                        <el-checkbox></el-checkbox>
                    </el-form-item>
                    <el-form-item class="login_btns">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="info">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<script>
import {login} from '@/api/login'
export default {
    data() {
        return {
            loginUser: {
                accountName: '',
                accountWord: ''
            },
            rules: {
                accountName: [
                    { required: true, message: '学号或邮箱不能为空', trigger: 'blur' }
                ],
                accountWord: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            },
            currentUser: {}
        }
    },
    methods: {
        // 登录
        login() {
            // 登录预验证
            this.$refs.loginFormRel.validate( async (valid) => {
                if (!valid) return this.$message.error("账号或密码错误");
                var { data:response } = await login(this.loginUser)
                if (response.code == 200){
                    // 存储当前用户信息以及用户权限信息(动态路由信息)
                    var token = response.data.loginInfo.token
                    var currentUser = {
                        accountId: response.data.loginInfo.accountId,
                        accountName: response.data.loginInfo.accountName
                    }
                    this.$store.dispatch('set_user', currentUser)
                    window.sessionStorage.setItem("Authorization", token)
                    this.$store.dispatch('set_router', JSON.stringify(response.data.loginInfo.authorities))
                    this.$router.push('/funcHall')
                    this.$message.success("登录成功")
                    return;
                }
                if (response.code === 500) {
                    this.$message.error(response.message)
                }        
            })
            // this.$router.push('/funcHall')
        }
    }
}
</script>

<style scoped>
.login_container {
  height: 100%;
  background-image: url("@/assets/bg/bg.jpg");
}
.login_box {
  width: 460px;
  height: 350px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.login_avatar {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.login_avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}
.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.login_btns {
    display: flex;
    justify-content: flex-end;
}
</style>
